import React, { useState, useRef } from 'react'

export default function App() {
  const [count, setCount] = useState(10)
  // useRef 另一个作用：实现多次渲染之间共享数据（都是同一个 ref 引用）
  const timerRef = useRef(null) // “类似于全局变量”，多个组件实例之间也不会相互影响
  const handleClick = () => {
    // !这里确实是防抖：不是节流
    clearInterval(timerRef.current)
    timerRef.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  return (
    <div>
      <h3>{count}</h3>
      <button onClick={handleClick}>开启定时器</button>
    </div>
  )
}
